<template>
  <div class="echarts">
    <el-breadcrumb separator="/" v-show="Thecurrenttown.label != '全部'">
      <el-breadcrumb-item :to="{ path: '/' }" v-if="Thecurrenttown.label">{{
        Thecurrenttown.label
      }}</el-breadcrumb-item>
      <el-breadcrumb-item v-if="ThecurrentvillageLabel">{{
        ThecurrentvillageLabel
      }}</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card :key="keyR">
      <div id="chart_example1" style="width: 270px; height: 370px"></div>
      <div id="chart_example2" style="width: 270px; height: 370px"></div>
      <div id="chart_example3" style="width: 270px; height: 370px"></div>
      <div id="chart_example4" style="width: 270px; height: 370px"></div>
      <div
        id="chartDom"
        style="width: 270px; height: 670px; display: none"
      ></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapState } from "vuex";
export default {
  data() {
    return {
      keyR: "",
      text: "地块",
      Ktotal: 0,
      Mtotal: 0,
      Ytotal: 0,
      number: 0,
      k: [],
      m: [],
      y: [],
      t: [],
      newecharts: {},
      params: {},
    };
  },
  created() {},
  watch: {
    "Thecurrenttown.value": {
      handler(o, n) {
        if (o != n) {
          this.params = {};
          this.drawLine();
          this.keyR = n;
        }
      },
      deep: true,
    },
    "Thecurrentvillage.value": {
      handler(o, n) {
        if (o != n) {
          this.params = {};
          this.drawLine();
          this.keyR = n;
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.drawLine();
    this.a();
  },
  methods: {
    a() {
      var chartDom = document.getElementById("chartDom");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        series: [
          {
            name: "Direct",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [320, 302, 301, 334, 390, 330, 320],
          },
          {
            name: "Mail Ad",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "Affiliate Ad",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "Video Ad",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [150, 212, 201, 154, 190, 330, 410],
          },
          {
            name: "Search Engine",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320],
          },
        ],
      };

      option && myChart.setOption(option);
    },

    drawLine() {
      // console.log(this.Thecurrenttown);
      // console.log(this.Thecurrentvillage);

      this.Ktotal = 0;
      this.Mtotal = 0;
      this.Ytotal = 0;
      this.number = 0;
      this.k = [];
      this.m = [];
      this.y = [];
      this.t = [];
      this.params = {
        systemTypes: localStorage.getItem("SYS_TYPE"),
      };

      if (this.Thecurrenttown.value) {
        this.params["townCode"] = this.Thecurrenttown.value;
      }

      if (this.Thecurrentvillage.value) {
        this.params["townCode"] = this.Thecurrenttown.value;
        this.params["villageCode"] = this.Thecurrentvillage.value;
      }

      if (this.Thecurrenttown.label === "全部") {
        delete this.params["townCode"];
        delete this.params["villageCode"];
      }

      if (this.Thecurrentvillage.label === "全部") {
        delete this.params["villageCode"];
      }

      if (this.params["townCode"] === this.params["villageCode"]) {
        delete this.params["villageCode"];
      }

      this.$axios
        .get("rbac/data/statistics/get", {
          params: this.params,
        })
        .then((result) => {
          this.text =
            localStorage.getItem("SYS_TYPE") == "SS1" ? "鱼塘" : "地块";
          let k = result.data.list1.length ? result.data.list1 : [0];
          k.forEach((item) => {
            if (item.value) {
              this.Ktotal += item.value;
            }
          });
          let m = result.data.list2.length ? result.data.list2 : [0];
          m.forEach((item) => {
            if (item.value) {
              this.Mtotal += item.value;
            }
          });

          let t = result.data.list3.length ? result.data.list3 : [0];

          let y = result.data.list4.length ? result.data.list4 : [0];
          y.forEach((item) => {
            if (item.value) {
              this.Ytotal += item.value;
            }
          });

          var yfilter = y.map((item)=>{
              return {
                 value: +item.value.toFixed(2),
                 name:item.name
              }
          })
          // 基于准备好的dom，初始化echarts实例
          var chartDom1 = document.getElementById("chart_example1");
          var myChart1 = echarts.init(chartDom1);
          var chartDom2 = document.getElementById("chart_example2");
          var myChart2 = echarts.init(chartDom2);
          var chartDom3 = document.getElementById("chart_example3");
          var myChart3 = echarts.init(chartDom3);
          var chartDom4 = document.getElementById("chart_example4");
          var myChart4 = echarts.init(chartDom4);

          // 绘制图表
          myChart1.setOption({
            title: {
              text: this.text + "总数量：" + this.Ktotal + " 块",
              subtext: "各二级地类数量",
              left: "left",
            },
            tooltip: {},
            label: {
              alignTo: "edge",
              formatter: "{name|{b}}\n{time|{c} 块}",
              minMargin: 15,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: "#999",
                },
              },
            },

            series: [
              {
                name: "访问来源",
                type: "pie",
                center: ["50%", "50%"],
                radius: [15, 70],
                data: k,
              },
            ],
          });
          myChart2.setOption({
            title: {
              text: this.text + "总面积：" + this.Mtotal.toFixed(2) + " 亩",
              subtext: "各二级地类面积",
              left: "left",
            },
            tooltip: {},
            label: {
              alignTo: "edge",
              formatter: "{name|{b}}\n{time|{c} 亩}",
              minMargin: 15,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: "#999",
                },
              },
            },
            series: [
              {
                name: "访问来源",
                type: "pie",
                center: ["50%", "50%"],
                radius: [15, 70],
                data: m,
              },
            ],
          });

          myChart3.setOption({
            title: {
              text: "主体类型分布",
              subtext: "类型说明",
              left: "left",
            },
            tooltip: {},
            label: {
              alignTo: "edge",
              formatter: "{name|{b}}\n{time|{c}}",
              minMargin: 15,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: "#999",
                },
              },
            },
            series: [
              {
                name: "访问来源",
                type: "pie",
                center: ["50%", "50%"],
                radius: [15, 70],
                data: t,
              },
            ],
          });
          myChart4.setOption({
            title: {
              text:
                "辖区" +
                this.text +
                "总产值：" +
                this.Ytotal.toFixed(2) +
                " 万元",
              subtext: "各级地类产值",
              left: "left",
            },
            tooltip: {

            },
            label: {
              alignTo: "edge",
              formatter:"{name|{b}}\n{time|{c} 万元}",
              minMargin: 15,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: "#999",
                },
              },
            },
            series: [
              {
                name: "访问来源",
                type: "pie",
                center: ["50%", "50%"],
                radius: [15, 70],
                data: yfilter,
              },
            ],
          });
        });
    },

    tol() {},
  },
  computed: {
    ThecurrenttownLabel() {
      if (this.Thecurrenttown) {
        return this.Thecurrenttown.label;
      } else {
        return "";
      }
    },
    ThecurrentvillageLabel() {
      if (this.Thecurrentvillage) {
        return this.Thecurrentvillage.label;
      } else {
        return "";
      }
    },
    ...mapState({
      Thecurrenttown: (state) => state.getTreeData.Thecurrenttown,
      Thecurrentvillage: (state) => state.getTreeData.Thecurrentvillage,
    }),
  },
};
</script>

<style lang="scss">
.echarts {
  width: 100%;

  .el-breadcrumb {
    padding: 0px 0px 10px 25px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
  }

  .tag-group {
    display: flex;
    justify-content: flex-start;

    > * {
      margin-right: 15px;
    }
  }
}
</style>
